<!--
 * @Description: 绑定设备页面
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:08:33
-->
<template>
  <div>
    <!-- 返回按钮 -->
    <div class="back">
      <el-page-header @back="$router.go(-1)" content="工程详情">
      </el-page-header>
    </div>

    <div style="height:500px; width:1295px; display:flex; flex-direction:column;">
      <!-- 上半部分 -->
      <div class="table1" style="flex: 3">
        <!-- 表格1 -->
        <div style="height:300px; width:1295px;">
          <!-- 标题 -->'
          <div class="title">
            设备信息
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="工程编号" label-class-name="my-label"
              content-class-name="my-content">{{Data.serial_number}}</el-descriptions-item>
            <el-descriptions-item label="工程名称" label-class-name="my-label"
              content-class-name="my-content">{{Data.name}}</el-descriptions-item>
            <el-descriptions-item label="工程类型"
              content-class-name="my-content1">{{Data.type}}</el-descriptions-item>
            <el-descriptions-item label="工程状态" content-class-name="my-content1">
              <el-tag size="small">{{Data.status}}</el-tag>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="开始时间" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道
              1188 号</el-descriptions-item> -->
            <el-descriptions-item label="开始时间"
              content-class-name="my-content4">{{Data.begin_time}}</el-descriptions-item>
            <el-descriptions-item label="结束时间"
              content-class-name="my-content4">{{Data.end_time}}</el-descriptions-item>
            <el-descriptions-item label="地址"
              content-class-name="my-content1">{{Data.address}}</el-descriptions-item>
            <el-descriptions-item label="工程负责人"
              content-class-name="my-content1">{{Data.charge_name}}</el-descriptions-item>
            <el-descriptions-item label="客户名称"
              content-class-name="my-content">{{Data.customer_name}}</el-descriptions-item>
            <el-descriptions-item label="客户电话"
              content-class-name="my-content">{{Data.customer_telephone}}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <!-- 抽屉 -->
      <el-drawer @close="toClose" size="50%" :title="this.title" :visible.sync="dialog"
        direction="rtl" custom-class="demo-drawer" ref="drawer">
        <div class="demo-drawer__content">
          <!-- {{form}} -->
          <el-form ref="myForm" :model="form" :rules="rules">
            <el-row>
              <el-col :span="24">
                <el-form-item prop="device_id" label="设备" :label-width="formLabelWidth">
                  <el-select v-model="form.device_id" placeholder="请选择设备">
                    <el-option v-for="item in devBindData" :key="item.id" :label="item.name"
                      :value="item.id" v-show="item.bind_status === 0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="longitude" label="经度" :label-width="formLabelWidth">
                  <el-input v-model="form.longitude" autocomplete="off"
                    placeholder="请输入经度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="latitude" label="纬度" :label-width="formLabelWidth">
                  <el-input v-model="form.latitude" autocomplete="off"
                    placeholder="请输入纬度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="video" label="视频流" :label-width="formLabelWidth">
                  <el-input v-model="form.video" autocomplete="off" placeholder="请输入视频流"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>

          <div class="demo-drawer__footer">
            <el-button @click="($event) => (dialog = false)">取 消</el-button>
            <el-button type="primary" @click="toSave">确定</el-button>
          </div>
        </div>
      </el-drawer>

      <!-- 下半部分 -->
      <div class="table2" style="flex: 2;">

        <div style="height:300px; width:1295px; border-top:1px solid; padding-top:60px">
          <!-- 标题 -->
          <div class="title">
            <el-row>
              <el-col :span="22">
                <div>绑定信息</div>
              </el-col>
              <!-- 绑定操作 -->
              <el-col :span="2" style="text-align:right;"><el-button type="primary"
                  @click="toBind">绑定</el-button></el-col>
            </el-row>
          </div>

          <!-- 表格2 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="equipment_number" label="设备编号" width="180">
            </el-table-column>
            <el-table-column prop="equipment_name" label="设备名称">
            </el-table-column>
            <el-table-column prop="equipment_longitude" label="经度">
            </el-table-column>
            <el-table-column prop="equipment_latitude" label="纬度">
            </el-table-column>
            <el-table-column prop="equipment_video" label="视频流  ">
            </el-table-column>
            <el-table-column prop="online_status" label="在线状态" align="center">
              <template v-slot="scope">
                <div>
                  <el-tag v-if="scope.row.online_status===1" type="success">在线</el-tag>
                  <el-tag v-else type="danger">离线</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <div>
                  <el-button @click="($event) => toUnbind(scope.row)" type="text">解绑</el-button>
                  <el-button @click="($event) => toOffLine(scope.row)"
                    v-if="scope.row.online_status===1" type="text">下线</el-button>
                  <el-button @click="($event) => toOnLine(scope.row)"
                    v-if="scope.row.online_status===0" type="text">上线</el-button>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
    data() {
        return {
            //表单验证规则
            rules: {
                longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
                latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                device_id: [{ required: true, message: '请选择设备', trigger: 'change' }],
            },
            //设备绑定信息
            devBindData: [],
            parmas: {
                page: 1,
                pageSize: 100,
            },
            formLabelWidth: '80px',
            form: {
                engineer_id: '',
            },
            dialog: false,
            title: '绑定设备',
            //工程详情数据
            Data: {},
            //表格二数据
            tableData: [],
            //设备信息
            empData: {},
            //get请求的数据
            idData: {
                charge_id: '',
                customer_id: '',
            },
            // 设备id
            idData1: {
                device_id: '',
            },
        }
    },
    computed: {},
    methods: {
        //获取设备绑定信息
        async getDevBindData() {
            let res = await get('/device/pageQuery', this.parmas)
            // console.log(res);
            this.devBindData = res.data.list
            // console.log(this.devBindData)
        },
        //去保存
        toSave() {
            this.$refs['myForm'].validate(async (valid) => {
                if (valid) {
                    // alert("submit!");
                    // console.log(this.form);
                    let res = await get('/engineer/bindService', this.form)
                    if (res.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '这是一条成功的提示消息',
                            type: 'success',
                        })
                        //清除表单校验
                        this.toClose()
                        //刷新页面
                        this.getEmpData()
                        //刷新绑定信息
                        this.getDevBindData()
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.message,
                            type: 'error',
                        })
                    }
                    //关闭抽屉
                    this.dialog = false
                } else {
                    // console.log("error submit!!");
                    return false
                }
            })
        },
        //关闭抽屉
        toClose() {
            this.dialog = false
            //重置表单校验
            this.$refs['myForm'].resetFields()
        },
        //去绑定
        toBind() {
            this.dialog = true
        },
        //去解绑
        toUnbind(row) {
            this.$confirm('设备解绑后将自动下线，并且产生拆机工单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })

                .then(async () => {
                    // console.log(row);
                    this.idData1.device_id = row.id

                    console.log(this.idData1)
                    let res = await get('/engineer/unbindDevice', this.idData1)
                    // console.log(res)
                    this.getEmpData()
                    this.$message({
                        type: 'success',
                        message: '绑定成功!',
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作',
                    })
                })
        },
        //上线
        toOnLine(row) {
            this.$confirm('设备上线后将启用采集数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let res = await get('/device/openDevice', { id: row.id })
                    this.getEmpData()
                    this.$message({
                        type: 'success',
                        message: '上线成功!',
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作',
                    })
                })
        },
        //下线
        toOffLine(row) {
            // console.log(row);
            this.$confirm('设备下线后将无法采集数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    let res = await get('/device/closeDevice', { id: row.id })
                    // console.log(res);
                    this.getEmpData()
                    this.$message({
                        type: 'success',
                        message: '下线成功!',
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作',
                    })
                })
        },
        //获取设备信息
        async getEmpData() {
            this.tableData = []
            // 查询工程设备
            let res = await get('/engineer/findEngineerDeviceTree', this.idData)
            this.empData = res.data
            // console.log(this.empData)
            let temp = this.empData[0]
            // console.log(temp.children[0]);
            // 当temp中有children的时候表示此工程有设备
            if (temp.children) {
                for (let i = 0; i < temp.children.length; i++) {
                    let res1 = await get('/device/findDeviceDetail', { id: temp.children[i].id })
                    // console.log(temp.children[i].id);
                    // console.log(res1);
                    // console.log(res1.data);
                    let tempData = { ...this.Data }
                    // console.log(tempData);
                    tempData.equipment_longitude = temp.children[i].position[0]
                    tempData.equipment_latitude = temp.children[i].position[1]
                    tempData.equipment_name = temp.children[i].name
                    // console.log(temp.children[i].name)
                    tempData.equipment_video = temp.children[i].video
                    // console.log(tempData.equipment_longitude)
                    // console.log(tempData)
                    // console.log(i);
                    tempData.equipment_number = res1.data.serial_number
                    tempData.online_status = res1.data.online_status
                    tempData.id = res1.data.id
                    // console.log(res1.data.id);

                    this.tableData.push(tempData)
                    // console.log(this.tableData);
                }
            }
        },
    },
    created() {
        //接受传来的参数
        // console.log(this.$route.query)
        this.Data = { ...this.$route.query }
        // console.log(this.Data)
        this.idData.charge_id = this.Data.charge_id
        this.idData.customer_id = this.Data.customer_id
        // console.log(this.idData);
        this.idData1.engineer_id = this.Data.id
        this.form.engineer_id = this.Data.id
        // console.log(this.idData1);
        this.getEmpData()
        // console.log(this.Data)
        this.getDevBindData()
    },
    mounted() {},
}
</script>
<style>
.my-label {
    background: #e1f3d8;
    width: 150px;
}
/* 淡粉色 */
.my-content {
    background: #fde2e2;
    width: 430px;
}

/* 淡蓝色 */
.my-content1 {
    background: #d2f6f6;
}
/* 淡黄色 */
.my-content2 {
    background: #f8f5e4;
}
/* 淡紫色 */
.my-content3 {
    background: #d2cede;
}
/* 淡绿色 */
.my-content4 {
    background: #ceeac0;
}

.title {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>